<%--
  Created by IntelliJ IDEA.
  User: AdrianJ
  Date: 2024/6/10
  Time: 19:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--check for messages in request--%>
<%
    String errorMessage;
    String successMessage;
    errorMessage = (String)request.getAttribute("errorMessage");
    successMessage = (String)request.getAttribute("successMessage");
 %>
<% if (errorMessage!= null && !errorMessage.equals("")) { %>
    <script>
        alert("error:" +  "<%= errorMessage %>");
    </script>
<% }
    if(successMessage!= null && !successMessage.equals("")) {
%>

    <script>
        alert("success:" +  "<%= successMessage %>");
    </script>

<% } %>

<html>

<head>
    <title>Login</title>
    <link rel="stylesheet", type="text/css", href="css/all.css">
    <style>
        .sign-container{
            position: absolute;
            left: 0;
            right: 60%;
            top: 0;
            bottom: 0;
        }
        .sign-detail-container{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        .sign-detail-container h1{
            right: 12%;
            text-align: left;
            position: absolute;
            top: 16%;
            left: 12%;
            font-size: 22px;
            font-weight: bold;
        }
        .line-container{
            position: absolute;
            left: 16%;
            right: 16%;
            top: 26%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            bottom: 42%;
        }
        .sign-line{
            height: 60px;
            width: 100%;
            margin: 4px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sign-line img{
            height: 28px;
            margin: 0 2px 0 -2px;
            object-fit: contain;
        }
        .sign-line input{
            width: calc(100% - 52px);
            outline: none;
            border-radius: 4px;
            padding: 4px 8px;
            border: 1px solid #ccc;
        }
        .link-text1{
            position: absolute;
            bottom: 34%;
            right: 16%;
            color: #5471c0;
            cursor: pointer;
            font-size: 14px;
        }
        .link-text2{
            position: absolute;
            bottom: 29%;
            cursor: pointer;
            right: 16%;
            color: #5471c0;
            font-size: 14px;
        }
        .sign-line button{
            font-size: 18px;
            padding: 8px 0;
            border: 0;
            letter-spacing: 2px;
            color: white;
            background-color: #718acc;
            border-radius: 4px;
            box-shadow: 0 2px 8px #8fa2ee;
            transition: .3s linear;
            width: 68%;
            cursor: pointer;
        }
        .sign-line button:hover{
            transform: rotateX(15deg);
            box-shadow: 0 16px 16px #8fa2ee;
        }
        .sign-divider{
            position: absolute;
            top: -16px;
            margin: 0;
        }
        .sign-in-other-container{
            position: absolute;
            bottom: 15%;
            top: 78%;
            left: 16%;
            right: 16%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .sign-in-other-container img{
            height: 80%;
            cursor: pointer;
            transition: .4s;
        }
        .sign-in-other-container img:hover{
            transform: scale(1.2);
            transition: .4s;
        }
        .intro-container{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 60%;
            background-color: #ccdaff;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .intro-container img{
            position: absolute;
            width: 54%;
            right: 12%;
            bottom: 8%;
            animation: 2s 1 imgani;
        }
        @keyframes imgani {
            0%{
                transform: translateX(20%);
                opacity: 0;
            }
        }
        .intro-container h1{
            position: absolute;
            top: 40px;
            left: 40px;
            font-size: 32px;
            color: #333;
            font-weight: bold;
            letter-spacing: 2px;
            animation: 1 2s h1ani;
        }
        @keyframes h1ani {
            0%{
                letter-spacing: 0;
                transform: translateY(-40%);
                opacity: 0;
            }
        }
        .intro-container h2{
            position: absolute;
            left: 40px;
            top: 90px;
            font-size: 18px;
            white-space: pre-line;
            z-index: 3;
            line-height: 26px;
            color: #555;
            animation: 1 2s h1ani;
            font-weight: normal;
        }
        .intro-container p{
            position: absolute;
            bottom: 10px;
            right: 40px;
            color: #333;
            text-decoration: underline;
            cursor: pointer;
            animation: 2s 1 imgani;
        }
        .sign-com{
            animation: 2.4s appear 1;
        }
        @keyframes appear {
            0%{
                opacity: 0;
            }
        }
        /*框架*/
        .all-container{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
        }
        .tabbar-all-container{
            height: 48px;
            transition: 1s;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
        }
        .card-container{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background: #f8f8f844;
        }
        .sign-card-container{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 58%;
            height: 72%;
            box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
            border-radius: 4px;
            transition: 1s;
        }
        .sign-all-container{
            position: fixed;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #eff4f888, #e1eafc88);
        }
    </style>
</head>
<body>

<script>
    //调整注册/登录
    function switchTo(mode) {
        let signInContainer = document.getElementById("signInContainer");
        let signUpContainer = document.getElementById("signUpContainer");
        let resetPasswordContainer = document.getElementById("resetPasswordContainer");
        switch (mode) {
            case 0:
                signInContainer.style.display = "block";
                signUpContainer.style.display = "none";
                resetPasswordContainer.style.display = "none";
                break;
            case 1:
                signInContainer.style.display = "none";
                signUpContainer.style.display = "block";
                resetPasswordContainer.style.display = "none";
                break;
            case 2:
                signInContainer.style.display = "none";
                signUpContainer.style.display = "none";
                resetPasswordContainer.style.display = "block";
                break;
        }
    }
    //其他登陆方式
    function signInWithQQ() {
        alert('功能暂不支持')
    }
    function signInWithWeChat() {
        alert('功能暂不支持')
    }
    function signInWithTG() {
        alert('功能暂不支持')
    }
    //页面跳转（客户端重定向）
    const jumpToHelper = ()=>{
        window.location.href = 'helper.jsp';
    }
</script>


<div class='sign-all-container' >
    <div class="sign-card-container">
        <div class="sign-com">
        <div class="sign-container">
            <!-- 登录 -->
            <div id="signInContainer" class="sign-detail-container">
                <h1>登录</h1>

                <form method="post" action="login-servlet">
                    <div class="line-container sign-in-line-container">
                        <div class="sign-line">
                            <input id="signInAccount" name="account" type="text" placeholder="请输入手机号" required>
                            <img src="assets/phone.png">
                        </div>
                        <div class="sign-line">
                            <input id="signInPassword" name="password" type="password" placeholder="请输入密码" required>
                            <img src="assets/password.png">
                        </div>
                        <div class="sign-line">
                            <input style="width: 20px" id="rememberMe" name="rememberMe" type="checkbox">
                            <div>记住我</div>
                        </div>
                        <div class="sign-line">
                            <div></div>
                            <button type="submit" style="width: 100%">开始</button>
                            <div></div>
                        </div>
                    </div>
                </form>

                <div onclick="switchTo(1)" class="link-text1">点击注册</div>
                <div onclick="switchTo(2)" class="link-text2">忘记密码？点击重设</div>
                <div class="sign-in-other-container">
                    <div class="sign-divider"></div>
                    <img onclick="signInWithQQ()" src="assets/QQ.png">
                    <img onclick="signInWithWeChat()" src="assets/wechat.png">
                    <img onclick="signInWithTG()" src="assets/telegram.png">
                </div>
            </div>

            <!-- 注册 -->
                <div id="signUpContainer" class="sign-detail-container" style="display:none;">
                <form method="post" action="signUp-servlet">
                    <h1>注册</h1>
                    <div class="line-container sign-up-line-container">
                        <div class="sign-line">
                            <input id="signUpAccount" name="account" type="text" placeholder="请输入手机号" required>
                            <img src="assets/phone.png">
                        </div>
                        <div class="sign-line">
                            <input id="signUpPassword" name="password" type="password" placeholder="请输入密码" required>
                            <img src="assets/password.png">
                        </div>
                        <div class="sign-line">
                            <input id="signUpCheckPassword" name="checkPassword" type="password" placeholder="请确认密码" required>
                            <img src="assets/password.png">
                        </div>
                        <div class="sign-line">
                            <input id="signUpCode" name="code" type="text" placeholder="请输入验证码" required>
                            <img src="assets/security.png">
                        </div>
                    </div>
                    <div class="link-text1" onclick="sendCode(0)">发送短信验证码</div>
                    <div onclick="switchTo(0)" class="link-text2">返回</div>
                    <div class="sign-line" style="position: absolute; bottom: 18%; left: 0; right: 0;height: 36px">
                        <div></div>
                        <button type="submit">确认</button>
                        <div></div>
                    </div>
                </form>
            </div>

            <!-- 重设密码 -->
            <div id="resetPasswordContainer" class="sign-detail-container" style="display:none;">

                <form method="post" action="alter-password-servlet">
                    <h1>重设密码</h1>
                    <div class="line-container">
                        <div class="sign-line">
                            <input id="resetPasswordAccount" name="account" type="text" placeholder="请输入手机号">
                            <img src="assets/phone.png">
                        </div>
                        <div class="sign-line">
                            <input id="resetPassword" name="newPassword" type="password" placeholder="请输入密码">
                            <img src="assets/password.png">
                        </div>
                        <div class="sign-line">
                            <input id="resetCheckPassword" name="confirmPassword" type="password" placeholder="请确认密码">
                            <img src="assets/password.png">
                        </div>
                        <div class="sign-line">
                            <input id="resetCode" name="verificationCode" type="text" placeholder="请输入验证码">
                            <img src="assets/security.png">
                        </div>
                    </div>
                    <div onclick="switchTo(0)" class="link-text2">返回</div>
                    <div class="sign-line" style="position: absolute; bottom: 18%; left: 0; right: 0;height: 36px">
                        <div></div>
                        <button type="submit">确认</button>
                        <div></div>
                    </div>
                </form>
            </div>
        </div>
        </div>
        <div class="intro-container">
            <h1>断舍哩</h1>
            <h2>一个校内闲置物品买卖平台。<br>身边有不需要的物件想转手给同校的同学？<br>快来断舍哩，为你转手好物</h2>
            <img src="assets/logocom.png">
            <p onclick="jumpToHelper()">帮助</p>
    </div>
    </div>
</div>
</body>
</html>
